<template>
  <div class="main-container bg">
    <search></search>
    <div class="cell_h bg_white">
      <van-cell title="所有商品" is-link value="全部" to="/typepage/Allproduct" />
    </div>
    <div class="cell_h bg_white" v-for="(item,index) in allProduct" :key="index">
      <van-cell :title="item.title" is-link value="全部" :to="{path:'/typepage/Allproduct',query:{'id':item.id}}" />
      <div class="grid">
        <van-row gutter="40">
          <van-col span="8" v-for="(itemChild,index) in item.products" :key="index">
            <router-link class="grid_pad" :to="{path:'/typepage/Allproduct',query:{'id':itemChild.id}}">
              <div class="center-block state_c "><img :src="itemChild.imagePath" class="img-rounded" /></div>
              <h3 :title="itemChild.title">{{itemChild.title}}</h3>
            </router-link>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import search from "@/components/Search/Search";
export default {
  data() {
    return {
      allProduct: [
       
        {
          id: 1,
          title: "林更新同款",
          products: [{
            id: 101,
            desc: "单西",
            english: "MENS SUITS",
            imagePath: "http://img.hlamall.cn/hnzad1r015a/1547457027085.jpg",
            title: "林更新同款",
            price: "318"
          }]
        }, {
          id: 2,
          title: "系列产品",
          products: [{
            id: 201,
            desc: "单西",
            english: "MENS SUITS",
            imagePath: "http://img.hlamall.cn/sources/goods/HWXAD3E117A/HWXAD3E117A_21622_1.jpg",
            title: "牛仔系列",
            price: "318"
          }, {
            id: 202,
            desc: "夹克",
            english: "JACKETS",
            imagePath: "http://img.hlamall.cn/sources/goods/HNTJD4E116A/HNTJD4E116A_21625_1.jpg",
            title: "夹克",
            price: "198"
          }, {
            id: 203,
            desc: "卫衣",
            english: "SWEATERS",
            imagePath: "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
            title: "HLA/海澜之家白色衬衫男斜纹提花长袖衬衫2019春季新品服帖正装HNCAD1R002T",
            price: "188"
          }, {
            id: 204,
            desc: "长袖衬衫",
            english: "SHIRTS",
            imagePath: "http://img.hlamall.cn/hncad1r001t/1550727449233.jpg",
            title: "长袖衬衫",
            price: "258"
          }]
        }, {
          id: 3,
          title: "外套",
          products: [{
            id: 301,
            desc: "单西",
            english: "MENS SUITS",
            imagePath: "http://img.hlamall.cn/sources/goods/HWXAD3E117A/HWXAD3E117A_21622_1.jpg",
            title: "牛仔系列",
            price: "318"
          }, {
            id: 302,
            desc: "夹克",
            english: "JACKETS",
            imagePath: "http://img.hlamall.cn/sources/goods/HNTJD4E116A/HNTJD4E116A_21625_1.jpg",
            title: "夹克",
            price: "198"
          }, {
            id: 303,
            desc: "卫衣",
            english: "SWEATERS",
            imagePath: "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
            title: "HLA/海澜之家白色衬衫男斜纹提花长袖衬衫2019春季新品服帖正装HNCAD1R002T",
            price: "188"
          }, {
            id: 304,
            desc: "长袖衬衫",
            english: "SHIRTS",
            imagePath: "http://img.hlamall.cn/hncad1r001t/1550727449233.jpg",
            title: "长袖衬衫",
            price: "258"
          }]
        }, {
          id: 4,
          title: "春季新款",
          products: [{
            id: 401,
            desc: "单西",
            english: "MENS SUITS",
            imagePath: "http://img.hlamall.cn/sources/goods/HWXAD3E117A/HWXAD3E117A_21622_1.jpg",
            title: "牛仔系列",
            price: "318"
          }, {
            id: 402,
            desc: "夹克",
            english: "JACKETS",
            imagePath: "http://img.hlamall.cn/sources/goods/HNTJD4E116A/HNTJD4E116A_21625_1.jpg",
            title: "夹克",
            price: "198"
          }, {
            id: 403,
            desc: "卫衣",
            english: "SWEATERS",
            imagePath: "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
            title: "HLA/海澜之家白色衬衫男斜纹提花长袖衬衫2019春季新品服帖正装HNCAD1R002T",
            price: "188"
          }, {
            id: 404,
            desc: "长袖衬衫",
            english: "SHIRTS",
            imagePath: "http://img.hlamall.cn/hncad1r001t/1550727449233.jpg",
            title: "长袖衬衫",
            price: "258"
          }, {
            id: 405,
            desc: "卫衣",
            english: "SWEATERS",
            imagePath: "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
            title: "HLA/海澜之家白色衬衫男斜纹提花长袖衬衫2019春季新品服帖正装HNCAD1R002T",
            price: "188"
          }, {
            id: 406,
            desc: "长袖衬衫",
            english: "SHIRTS",
            imagePath: "http://img.hlamall.cn/hncad1r001t/1550727449233.jpg",
            title: "长袖衬衫",
            price: "258"
          }]
        }
      ]
    }
  },
  methods: {

  },
  components: {
    search
  }
};
</script>
<style lang="scss" scoped>


.cell_h {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
}

.van-cell:not(:last-child)::after {
  right: 15px;
}
.grid {
  width: 100%;
  background: #fff;
  padding: 10px;
  p {
    font-size: 12px;
    color: red;
    padding: 0px;
    margin: 0px;
    text-align: left;
    span {
      font-size: 16px;
      font-weight: bold;
    }
  }
  h3 {
    margin-top: 1px;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    color: #555;
    padding: 0px;
    margin: 0px;
    text-align: center;
  }
  .grid_pad {
    margin-top: 10px;
    display: block;
  }
}
.state_c {
  height: 80px;
}

.state_c img {
  width: 100%;
  height: 80px;
}
</style>
